<template>
  <div>
    <header>
      <div class="shop-logo">
        <image :src="'http://elm.cangdu.org/img/'+shopInfo.image_path" mode="aspectFill"></image>
        <div class="shop-icon">
          <image :src="'http://elm.cangdu.org/img/'+shopInfo.image_path" mode="aspectFill"></image>
        </div>
      </div>
      <div class="shop-details">
        <h1>{{shopInfo.name}}</h1>
        <span>评价:4.7 月销106单 蜂鸟快送约26分钟</span>
        <div class="shop-coupon">
          <span>￥8元无门槛</span>
          <span>领取</span>
        </div>
        <div class="order-activity-rules">
          <div>
            <span>减满</span>
            <p>满30减16，满65减26，满98减38,....</p>
            <b>5个优惠</b>
          </div>
          <div class="tips">欢迎光临，用餐高峰请提前下单，谢谢</div>
        </div>
      </div>
    </header>
    <nav>
      <ul>
        <li  v-for="(item,index) in navText" :key="index" :class="{'li-active':isShow===index}" @click="toggleNav(index)">{{item}}</li>
      </ul>
    </nav>
    <order v-if="isShow==0"></order>
    <shopRating v-if="isShow==1"></shopRating>
    <shopInfo v-if="isShow==2"></shopInfo>
  </div>
</template>
<script>
import order from "./chilrden/order/order";
import shopRating from "./chilrden/shopRating/shopRating";
import shopInfo from "./chilrden/shopInfo/shopInfo";
import {getShopInfo} from '../../api/index'

export default {
  data() {
    return {
      navText:['点餐','评价','商家'],
      isShow: 0,
      shopInfo:{}
    };
  },
  components: {
    order,
    shopRating,
    shopInfo
  },
 beforeMount() {
   wx.request({
     url:getShopInfo(this.$root.$mp.query.id),
     success:res=>{
       this.shopInfo=res.data
     }
   })
  },
  methods: {
      toggleNav(index){
          this.isShow=index;
      }
  },
};
</script>
<style lang="scss" scoped>
header {
  .shop-logo {
    background-color: gray;
    position: relative;
    > image {
      width: 100%;
      height: 300rpx;
      opacity: 0.8;
    }
    .shop-icon {
      image {
        position: absolute;
        top: 200rpx;
        left: calc(50% - 70rpx);
        width: 140rpx;
        height: 140rpx;
      }
    }
  }
  .shop-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    font-size: 30rpx;
    h1 {
      font-weight: bold;
      font-size: 40rpx;
    }
    > span {
      color: gray;
    }
    .shop-coupon {
      margin-top: 20rpx;
      span {
        background-color: #ffe578;
        padding: 15rpx 15rpx;
        border-radius: 20rpx;
      }
    }
    .order-activity-rules {
      margin-top: 25rpx;
      font-size: 28rpx;
      > div {
        display: flex;
        > span {
          background-color: #f07373;
          color: white;
          margin-right: 10rpx;
        }
      }
      .tips {
        color: gray;
      }
    }
  }
}
nav {
    margin-top:20rpx;
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      padding-bottom: 20rpx;
    }
    .li-active{
        border-bottom:6rpx solid #26a2ff;
    }
  }
}
</style>
